import { DetailDataType, fetchDetailAPI } from "@/apis/detail";
import { NavBar } from "antd-mobile";
import {useEffect, useState} from "react";
import { useSearchParams } from "react-router-dom";
import { useNavigate } from "react-router-dom";

const Detail = () => {

    const navigate = useNavigate()
    const [detail,SetDetail] = useState<DetailDataType | null>(null);
    // 获取路由参数
    const [params] = useSearchParams()
    const id = params.get('id')
    useEffect(() => {
        const getDetail = async () => {
            try {
                const res = await fetchDetailAPI(id!)
                SetDetail(res.data.data)
            }catch(error){
                throw new Error("fetch detail error")
            }
        }
        getDetail()
    },[id])


    if (!detail) return <div>loading...</div> // 数据返回之前

    // 路由返回
    
    const back = () => {
        navigate(-1)
    }
    return (
        <div> 
            <NavBar onBack={back}>{detail?.title}</NavBar>
            <div dangerouslySetInnerHTML={{__html:detail?.content}}></div>
        </div>
    );
}; 


export default Detail;